<script setup lang="ts">
import AccessProcess from './parts/AccessProcess.vue'
import ApplicationScenarios from './parts/ApplicationScenarios.vue'
import CoreAdvantages from './parts/CoreAdvantages.vue'
import PackageIntroduction from './parts/PackageIntroduction.vue'
import ProductFeatures from './parts/ProductFeatures.vue'

const anchors = [
  { key: 'core-advantages', title: '核心优势', component: CoreAdvantages },
  { key: 'product-features', title: '产品功能', component: ProductFeatures },
  {
    key: 'package-introduction',
    title: '套餐介绍',
    component: PackageIntroduction
  },
  {
    key: 'application-scenarios',
    title: '应用场景',
    component: ApplicationScenarios
  },
  { key: 'access-process', title: '接入流程', component: AccessProcess }
]
const currentHash = ref('')
const handleChange = (hash: string) => {
  currentHash.value = hash
}
</script>

<template>
  <div class="main-parts">
    <a-anchor
      class="anchor-bar"
      @change="handleChange"
      line-less
      :change-hash="false"
    >
      <a-anchor-link
        :class="{ 'is-action': `#${anchor.key}` === currentHash }"
        v-for="anchor in anchors"
        :key="anchor.key"
        :href="`#${anchor.key}`"
      >
        {{ anchor.title }}
      </a-anchor-link>
    </a-anchor>
    <component
      :class="{ '-mt-35px': i === 0 }"
      v-for="(anchor, i) in anchors"
      :key="anchor.key"
      :is="anchor.component"
    />
  </div>
</template>

<style scoped lang="less">
.main-parts {
  @apply w-full;
  margin-top: -35px;
  .anchor-bar {
    @apply fixed-container sticky top-0 z-1000 h-70px bg-white overflow-hidden;
    box-shadow: 0px 4px 15px 0px rgba(59, 65, 72, 0.05);
    border-radius: 14px;
    :deep(.arco-anchor-list) {
      @apply flex items-center h-full;
      .arco-anchor-link-item,
      .arco-anchor-link {
        @apply flex-1 h-full text-center bg-transparent flex items-center justify-center;
        font-family: 'PingFang SC medium';
      }

      .arco-anchor-link-item {
        position: relative;
        &::before {
          content: '';
          display: block;
          width: 0;
          height: 0px;
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          bottom: 13px;
          border-radius: 2px;
          transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
          background: linear-gradient(90deg, #1462fc 0%, #07a0ff 100%);
        }
        &.is-action {
          &::before {
            width: 24px;
            height: 3px;
          }
        }
      }
    }
  }
}
</style>
